<template>
  <div class="show-display">
    <button type="button" :class="[type_class,size_class,color_class]">{{text_zw}}</button>
  </div>
</template>

<script>
export default {
  name : 'ButtonZw',
  props : ['size', 'type', 'text_zw'],
  data () {
    return {
      type_class : '',
      size_class : '',
      color_class : ''
    }
  },
  created () {
    this.size_class = this.size === 'bgs' ? 'btn-bgs-zw' : (this.size === 'bg' ? 'btn-bg-zw' : (this.size === 'small' ? 'btn-small-zw' : 'btn-default-zw'))
    this.type_class = this.type === 'success' ? 'btn-success-zw' : (this.type === 'warning' ? 'btn-warning-zw' : (this.type === 'danger' ? 'btn-danger-zw' : 'btn-info-zw'))
    this.color_class = 'btn-zw'
  }
}
</script>

<style lang='scss'  rel="stylesheet/scss" scoped>
.show-display{
  display: inline-block;
}
.btn-bgs-zw{
  height:46px;
}
.btn-bg-zw{
  height:34px;
}
.btn-default-zw{
  height:30px;
}
.btn-small-zw{
  height:26px;
}
.btn-info-zw{
  background: #00BCD4;
}
.btn-info-zw:hover{
  background: #0097A7;
}
.btn-success-zw{
  background: #4CAF50;
}
.btn-success-zw:hover{
  background: #388E3C;
}
.btn-warning-zw{
  background: #FF9800;
}
.btn-warning-zw:hover{
  background: #F57C00;
}
.btn-danger-zw{
  background: #F44336;
}
.btn-danger-zw:hover{
  background: #D32F2F;
}
.btn-zw{
  color:#fff;
  border:none;
  border-radius: 1px;
  cursor: pointer;
}
</style>
